<template>
  <card class="insure-card" title="操作记录" :showDivider="false">
    <table-index class="insure-card-table" :table="table" @loadData="loadData">
      <template #operateLog="{ record }">
        <p class="log-info">{{ record.operateLog }}</p>
      </template>
    </table-index>
  </card>
</template>
<script setup lang="ts">
  import { reactive, onMounted } from 'vue'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getOperateLogList } from '@/api/order/czsOrder'

  const props = defineProps({
    orderId: Number,
  })
  const queryParam = reactive({
    orderId: props.orderId,
  })
  const table = useTable({
    queryParam,
    columns: [
      {
        title: '操作时间',
        dataIndex: 'createTime',
        width: 180,
        sortable: {
          sortDirections: ['ascend', 'descend'],
          sortByApi: false,
        },
      },
      { title: '操作类型', dataIndex: 'operateTypeName', width: 200 },
      { title: '操作人', dataIndex: 'createUserName', width: 200 },
      { title: '订单状态', dataIndex: 'orderStatus', width: 120 },
      { title: '描述', slotName: 'operateLog' },
    ],
  })

  const loadData = useFetchTableDataApi(table, queryParam, getOperateLogList)

  onMounted(() => {
    loadData()
  })
</script>
<style scoped lang="less">
  .log-info {
    white-space: pre-wrap;
  }
</style>
